<template>
  <div class="profile">
    <n-grid cols="1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
      <n-grid-item>
        <n-card title="个人信息">
          <n-form :model="userForm" label-placement="left" label-width="80">
            <n-form-item label="用户名">
              <n-input v-model:value="userForm.username" disabled />
            </n-form-item>
            <n-form-item label="昵称">
              <n-input v-model:value="userForm.nickname" placeholder="请输入昵称" />
            </n-form-item>
            <n-form-item label="邮箱">
              <n-input v-model:value="userForm.email" placeholder="请输入邮箱" />
            </n-form-item>
            <n-form-item label="手机号">
              <n-input v-model:value="userForm.phone" placeholder="请输入手机号" />
            </n-form-item>
            <n-form-item label="角色">
              <n-tag :type="userForm.role === 'ADMIN' ? 'error' : 'info'">
                {{ userForm.role === 'ADMIN' ? '管理员' : '普通用户' }}
              </n-tag>
            </n-form-item>
            <n-form-item>
              <n-button type="primary" @click="handleUpdateProfile">
                <template #icon><SaveOutline /></template>
                保存修改
              </n-button>
            </n-form-item>
          </n-form>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card title="修改密码">
          <n-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-placement="left" label-width="100">
            <n-form-item label="原密码" path="oldPassword">
              <n-input 
                v-model:value="passwordForm.oldPassword" 
                type="password" 
                show-password-on="click"
                placeholder="请输入原密码" 
              />
            </n-form-item>
            <n-form-item label="新密码" path="newPassword">
              <n-input 
                v-model:value="passwordForm.newPassword" 
                type="password" 
                show-password-on="click"
                placeholder="请输入新密码" 
              />
            </n-form-item>
            <n-form-item label="确认密码" path="confirmPassword">
              <n-input 
                v-model:value="passwordForm.confirmPassword" 
                type="password" 
                show-password-on="click"
                placeholder="请再次输入新密码" 
              />
            </n-form-item>
            <n-form-item>
              <n-button type="primary" @click="handleChangePassword">
                <template #icon><KeyOutline /></template>
                修改密码
              </n-button>
            </n-form-item>
          </n-form>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { authApi } from '@/api/auth'
import { 
  NGrid, NGridItem, NCard, NForm, NFormItem, NInput, NButton, NTag, useMessage 
} from 'naive-ui'
import { SaveOutline, KeyOutline } from '@vicons/ionicons5'

const userStore = useUserStore()
const message = useMessage()

const userForm = ref({
  username: '',
  nickname: '',
  email: '',
  phone: '',
  role: ''
})

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordFormRef = ref(null)

const passwordRules = {
  oldPassword: { required: true, message: '请输入原密码', trigger: 'blur' },
  newPassword: { 
    required: true, 
    message: '请输入新密码', 
    trigger: 'blur',
    min: 6,
    message: '密码长度不能少于6位'
  },
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value) => {
        return value === passwordForm.value.newPassword
      },
      message: '两次输入的密码不一致',
      trigger: 'blur'
    }
  ]
}

const loadUserInfo = async () => {
  try {
    const user = await authApi.getCurrentUser()
    userForm.value = { ...user }
  } catch (error) {
    console.error(error)
  }
}

const handleUpdateProfile = async () => {
  try {
    // 注意：这里需要后端提供更新个人信息的接口
    // 暂时使用 fetchUserInfo 刷新用户信息
    await userStore.fetchUserInfo()
    message.success('信息更新成功')
  } catch (error) {
    console.error(error)
  }
}

const handleChangePassword = async () => {
  try {
    await passwordFormRef.value?.validate()
    await authApi.changePassword(passwordForm.value.oldPassword, passwordForm.value.newPassword)
    message.success('密码修改成功，请重新登录')
    passwordForm.value = { oldPassword: '', newPassword: '', confirmPassword: '' }
    
    // 退出登录
    setTimeout(() => {
      userStore.logout()
      window.location.href = '/login'
    }, 1500)
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  loadUserInfo()
})
</script>

<style scoped>
.profile {
  max-width: 1200px;
}
</style>

